import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Message_detail from "./Message_detail/Message_detail";

export default class Home_message extends Component {
  state = {
    list: [
      { id: 1, content: "我是第一条数据" },
      { id: 2, content: "我是第二条数据" },
      { id: 3, content: "我是第三条数据" },
    ],
  };
  render() {
    return (
      <div>
        <ul>
          {/* 第一种方式params传参 */}
          {/* {this.state.list.map((item) => (
            <li key={item.id} style={{ marginLeft: "10px" }}>
              <Link to={`/home/message/detail/${item.id}/${item.content}`}>
                点击
              </Link>
            </li>
          ))} */}

          {/* 第二种方式search传参 */}
          {/* {this.state.list.map((item) => (
            <li key={item.id} style={{ marginLeft: "10px" }}>
              <Link
                to={`/home/message/detail/?id=${item.id}&content=${item.content}`}
              >
                点击
              </Link>
            </li>
          ))} */}

          {/* 第三种方式state传参 */}
          {this.state.list.map((item) => (
            <li key={item.id} style={{ marginLeft: "10px" }}>
              <Link
                to={{
                  pathname: "/home/message/detail",
                  state: { id: item.id, content: item.content },
                }}
              >
                点击
              </Link>
            </li>
          ))}
        </ul>
        <hr></hr>
        {/* 第一种方式params传参-注册路由  需要定义参数名---路径会显示参数 */}
        {/* <Route
          path="/home/message/detail/:id/:content"
          component={Message_detail}
        /> */}

        {/* 第二种方式search传参-注册路由  正常注册即可---路径会显示参数 */}
        {/* <Route path="/home/message/detail" component={Message_detail} /> */}

        {/* 第三种方式state传参-注册路由  正常注册即可---路径不会显示参数 */}
        <Route path="/home/message/detail" component={Message_detail} />
      </div>
    );
  }
}
